<template>
	<view>
		<!-- 搜索 -->
		<view class="py-2 bg-white d-flex j-center seach a-center">
			<view class="px-3 d-flex py-1 rounded-50 span-18 bg-light-secondary">
				<u-icon   name="search" color="" size="28"></u-icon>
				<input class="ml-2" type="text" placeholder="搜索订单" @click="sendSeach" focus disabled="true"  />
			</view>
		</view>
		
		<scroll-view scroll-y="true" :style="{height: scrollHeight}" :scroll-top="scrollTop" @scroll="scroll" @scrolltolower="scrolltolower"
		 refresher-enabled="true" :refresher-triggered="triggered" :refresher-threshold="100" @refresherpulling="onPulling"
            @refresherrefresh="onRefresh" @refresherrestore="onRestore">
			<view class="mt-5" v-if="u_loadmore">
				<u-loadmore status="loading" icon-type="circle" />
			</view>
			<view class="" v-else>
				<view v-if="trashList.length<=0" class="d-flex flex-column j-center a-center h_100">
					<image src="../../static/images/home/icon_no_data.png" mode="" class="icon_no_data"></image>
					<view class="">暂无商品</view>
				</view>
				<view v-else class="m-2 p-2 rounded-20 bg-white" v-for="(item,index) in trashList" :key="index">
					<view class="">
						<view class="ellipsis">{{item.name}}</view>
					</view>
					<view class="font pt-1">货号：{{item.goods_sn}}</view>
					<view class="py-2">
						<text class="text-danger font-md">{{item.shop_price}}</text><text class="ml-2 font">原价:&nbsp;&nbsp;{{item.market_price}}</text>
					</view>
					<view class="d-flex j-end">
						<text class="px-4 py-1 dele font mr-3" @click="dele(item.goods_id)">删除</text>
						<text class="px-4 py-1 restore font" @click="recy(item.goods_id)">还原</text>
					</view>
				</view>
				<view class="pb-2" v-if="!trashList.length<=0">
					<view class="" v-if="trashList.length==total"  @click="loadmores">
						<u-loadmore status="nomore" icon-type="circle" />
					</view>
					<view class="" v-else >
						<u-loadmore status="loading" icon-type="circle" />
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- 还原提示 -->
		<u-modal v-model="recyShow" title="还原提示" show-title="false"  show-confirm-button show-cancel-button cancel-color confirm-color @confirm="confirm">
			<view class="py-3">
				<view class="text-center">你确定要将商品重新上架吗?</view>
			</view>
		</u-modal>
		<!-- 删除提示 -->
		<u-modal v-model="deleShow" title="删除提示" show-title="false"  show-confirm-button show-cancel-button cancel-color confirm-color @confirm="dele_confirm">
			<view class="py-3">
				<view class="text-center">您确定要删除该商品吗？</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	const SIZE = 10
	export default {
		data() {
			return {
				recyShow:false,
				deleShow:false,
				trashList:[],
				goods_id:0,
				recycleShow:true ,// 回收站标识符
				scrollHeight:0, // 自适应高度
				u_loadmore:true, // 加载中
				triggered: false, // 下拉刷新
				more:1, // 第几页
				count:10, // 条数
				total:0,// 总条数
				scrollTop:0,
				old: {
					scrollTop: 0
				}
			}
		},
		onReady() {
			let _this=this
			uni.getSystemInfo({
				success(resu) {
					const query = uni.createSelectorQuery()
					query.select('.seach').boundingClientRect()
					query.exec(function(res) {
						_this.scrollHeight = resu.windowHeight - res[0].bottom+ 'px';
					})
				}
			})
		},
		onLoad() {
			this.$H.post("admin/goods/trash/list").then(res=>{
				this.trashList=res.data
				this.u_loadmore=false 
				this.total=res.paginated.total	
			})		
			// 下拉刷新
			this._freshing = false;
		},
		methods: {
			// 下拉刷新 自定义下拉刷新控件被下拉
			 onPulling(e) {
			    console.log("onpulling", e);
				this.triggered = true;
			},
			// 自定义下拉刷新被触发
			onRefresh() {
			    if (this._freshing) return;
			    this._freshing = true;
			    setTimeout(() => {
					this.getData()
					this.triggered = false;
					this._freshing = false;
			    }, 1000)
			},
			// 自定义下拉刷新被复位
			onRestore() {
			    this.triggered = 'restore'; // 需要重置
			    console.log("onRestore");
			},
			// 加载数据
			getData(){
				this.$H.post("admin/goods/trash/list",{
					pagination:{
						count:this.count,
						page:this.more
					}
				}).then(res=>{
					this.trashList=res.data
					console.log(res)	
				})
			},
			// 上拉加载函数
			scrolltolower(e){
				let that = this
				// 每次上拉加载的数据比上一次多十个
				that.count += SIZE
				if(that.trashList.length==that.total){
					return
				}else{
					setTimeout(()=>{
					    that.getData()
					},1000)
				}
			},
			// 滚动时触发
			scroll(e){
				this.old.scrollTop = e.detail.scrollTop
			},	
			// 回到顶部
			loadmores(){
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
			},
			
			recy(id){
				this.recyShow=true,
				this.goods_id=id
			},
			// 搜索页
			sendSeach(){
				uni.navigateTo({
					url:"/pages/goods-seach/goods-seach?recycleShow="+JSON.stringify(this.recycleShow)
				})
			},
			confirm(){
				this.$H.post("admin/goods/restore",{id:this.goods_id}).then(res=>{
					uni.showToast({
						title:"还原成功",
						duration: 2000
					})
					this.$H.post("admin/goods/trash/list").then(res=>{
						this.trashList=res.data
					})
				})
			},
			// 删除
			dele(id){
				this.goods_id=id 
				this.deleShow=true
			},
			// 确定删除
			dele_confirm(){
				this.$H.post("v2/store/goods/delete",{
					goods_id:this.goods_id
				}).then(res=>{
					this.$H.post("admin/goods/trash/list").then(res=>{
						this.trashList=res.data
					})
				})
			},
		}
	}
</script>

<style>
	.restore{
		border-radius: 40upx;
		border: 1px solid #555;
	}
	.dele{
		border-radius: 40upx;
		border: 1px solid #555;
	}
</style>
